<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/iconfont/iconfont.css">
  <title>首页</title>
</head>

<body>
  <div class="home-nav">
    <div class="l clear">
      <img src="./img/nav.png" alt="">
      <div class="title">
        <div>中职教师研修平台</div>
        <div>TEACHERS DEVELOPMENT</div>
      </div>
    </div>
    <ul class="home-list clear">
      <li class="on">
        <a href="./home.html">
          首页
        </a>
      </li>
      <li>
        <a href="./curriculum.html">
          研修课程</a>
      </li>
      <li>
        <a href="./through.html">
          直通大赛</a>
      </li>
      <li>
        <a href="./resources.html">教研资源</a>
      </li>
      <li>
        <a href="./class.html">听课评课</a>
      </li>
      <li>
        <a href="./dialogue.html">对话名师</a>
      </li>
    </ul>
    <!-- 搜索 -->
    <div class="home-search">
      <div class="l">
        <input type="text" placeholder="搜索">
        <i class="icon iconfont icon-icon-"></i>
      </div>
      <div class="home-sign r">
        登录
      </div>
    </div>

  </div>
  <!-- 轮播图 -->
  <!-- Swiper -->
  <div class="swiper-container hoem-banner">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background: url(./img/banner.png) no-repeat center center"></div>
      <div class="swiper-slide">Slide 2</div>
    </div>
    <!-- Add Arrows -->
    <div class="home-button-next">
      <i class="icon iconfont icon-you"></i>
    </div>
    <div class="home-button-prev">
      <i class="icon iconfont icon-zuo"></i>
    </div>
  </div>
  <div class="home-speed">
    <div class="title">
      <div class="h">新课速递</div>
      <div class="n">依据专业标准 六大类教师发展课程 精准提升教师专业能力水平</div>
    </div>
  </div>
  <div class="home-wave">
    <img src="./img/dbl.png" alt="" style="width: 100%; height: 355px;" class="dbl">
    <div id="certify">
      <div class="swiper-container" id="homeSwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide home-screen">
            <img src="./img/banner.png" class="l" />
            <div class="r">
              <div class="title">如何把教学当作一门艺术</div>
              <div class="explain">教师做好自己的教学工作是天职，但教师不能把教学仅当作一项任务去完成，教学不仅仅是技术或方法，更是一门艺术。顾沛教授通过对教学理论的深入探讨，结合一系列的教学创新案例讲述了如何把教学当作一门艺术，旨在激发创新… </div>
            </div>
          </div>
          <div class="swiper-slide home-screen">
            <img src="./img/banner.png" class="l" />
            <div class="r">
              <div class="title">如何把教学当作一门艺术</div>
              <div class="explain">教师做好自己的教学工作是天职，但教师不能把教学仅当作一项任务去完成，教学不仅仅是技术或方法，更是一门艺术。顾沛教授通过对教学理论的深入探讨，结合一系列的教学创新案例讲述了如何把教学当作一门艺术，旨在激发创新… </div>
            </div>
          </div>
          <div class="swiper-slide home-screen">
            <img src="./img/banner.png" class="l" />
            <div class="r">
              <div class="title">如何把教学当作一门艺术</div>
              <div class="explain">教师做好自己的教学工作是天职，但教师不能把教学仅当作一项任务去完成，教学不仅仅是技术或方法，更是一门艺术。顾沛教授通过对教学理论的深入探讨，结合一系列的教学创新案例讲述了如何把教学当作一门艺术，旨在激发创新… </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="home-direct">
    <div class="xxback">
      <div class="title">
        <div>直通大赛</div>
        <div>
          <span>以大赛促教</span>
          <span style="
          padding-left:  20px;
          padding-right: 18px;
      ">优化教学设计</span>
          <span>提升教师信息素养</span>
        </div>
      </div>
      <div class="mobile clear">
        <div class="l">
          <ul>
            <li class="clear">
              <div class="ll">
                <div>大赛简介</div>
                <div>基于超星学习通，以“移动改变教学” 为理念，为广大中职教师提供专业服务</div>
              </div>
              <div class="lr">
                <i class="icon iconfont icon-fuwuneirong"></i>
              </div>
            </li>
            <li class="clear">
              <div class="ll">
                <div>参赛合约</div>
                <div>参赛及获奖资格</br> 内容要求
                </div>
              </div>
              <div class="lr">
                <i class="icon iconfont icon-icon-1"></i>

              </div>
            </li>
            <li class="clear">
              <div class="ll">
                <div>考核评选</div>
                <div>基整体要求</br>
                  过程性评比</div>
              </div>
              <div class="lr">
                <i class="icon iconfont icon-hua"></i>
              </div>
            </li>
            <li class="clear">
              <div class="ll">
                <div>总决赛细则</div>
                <div>线上评审</br>
                  线下评审</div>
              </div>
              <div class="lr">
                <i class="icon iconfont icon-daohang"></i>
              </div>
            </li>
          </ul>
        </div>
        <div class="c">
          <div>
            <div class="invitationcode homeguide" style="display: none">
              下载学习通并输入</br>
              邀请码：zyydjxds </br>
              进入页面参与报名</br>
            </div>
          </div>
          <img src="./img/phone.png" alt="" class="homeguidenone">
          <img src="./img/guide.png" alt="" class="homeguide" style="display: none">
        </div>
        <div class="r l">
          <ul>
            <li class="clear">
              <div class="ll">
                <div>参赛要求</div>
                <div>职业院校各学科、各专业
                  <br> 任课教师及企业教师等
                </div>
              </div>
              <div class="lr">
                <i class="icon iconfont icon-paper-clip"></i>
              </div>
            </li>
            <li class="clear">
              <div class="ll">
                <div>参赛事项</div>
                <div>参报名流程、时间
                  <br> 师资培训、线上培训
                </div>
              </div>
              <div class="lr">
                <i class="icon iconfont icon-jilu"></i>
              </div>
            </li>
            <li class="clear">
              <div class="ll">
                <div>初赛细则</div>
                <div>提交材料、时间、格式、
                  <br> 初赛材料提交至邮箱、线上评审
                </div>
              </div>
              <div class="lr">
                <i class="icon iconfont icon-daohang"></i>
              </div>
            </li>
            <li class="clear">
              <div class="ll">
                <div>奖项设置</div>
                <div>经专家评审，为评选出的优秀作品设置一、二、三等奖和优秀奖</div>
              </div>
              <div class="lr">
                <i class="icon iconfont icon-jiangpai"></i>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="bottom" id="signUp">
        我要报名
      </div>
    </div>
  </div>
  <div class="footer-wrap">
    <div class="footer clear">
      <div class="platform home-nav">
        <div class="l clear">
          <img src="./img/nav.png" alt="">
          <div class="title">
            <div>中职教师研修服务平台</div>
            <div>TEACHERS DEVELOPMENT</div>
          </div>
        </div>
        <div class="bottom">
          <li>Copyright©超星</li>
          <li>客服电话：010—51665380</li>
          <li>京ICP备：10040544号</li>
          <li>
            <img src="./img/g.png" alt="" style="position: relative;top: 3px;"> 京公网安备 11010802021885号</li>
        </div>
      </div>
      <div class="list" style="margin-left: 68px">
        <a href="./curriculum.html">
          <div class="title">研修课程</div>
        </a>
        <ul>
          <li>信息技术</li>
          <li>师德师风</li>
          <li>职教理论</li>
          <li>专业知识</li>
          <li>专业能力</li>
          <li>管理能力</li>
        </ul>
      </div>
      <div class="list" style="margin-left: 65px">
        <a href="./through.html">
          <div class="title">直通大赛</div>
        </a>
        <ul>
          <li>超星2018第二届</li>
          <li>移动教学大赛</li>
        </ul>
      </div>
      <div class="list" style="margin-left: 57px">
        <a href="./resources.html">
          <div class="title">教研资源</div>
        </a>
        <ul>
          <li>图书</li>
          <li>期刊</li>
          <li>专题</li>
        </ul>
      </div>
      <div class="list" style="margin-left: 34px">
        <a href="./class.html">
          <div class="title">听课评课</div>
        </a>
        <ul>
          <li>优势</li>
          <li>用法</li>
          <li>评价</li>
          <li>结果</li>
        </ul>
      </div>
      <div class="list" style="margin-left: 39px">
        <a href="./dialogue.html">
          <div class="title">对话名师</div>
        </a>
        <ul>
          <li>名师简介</li>
          <li>主题简介</li>
        </ul>
      </div>
      <div class="qrcode">
        <img src="./img/qrcodr.png" alt="">
        <div>下载学习通</div>
      </div>

    </div>
  </div>
  <!-- <div style="height: 500px;width: 100%;"></div> -->
  <script src="./js/swiper.min.js"></script>
  <script src="./js/jquery-3.3.1.min.js"></script>
  <script>
    $("#signUp").click(function () {
      $(".homeguide").show();
      $(".homeguidenone").hide();
    });
  </script>
  <!-- 轮播图 -->
  <script>
    var swiper = new Swiper('.hoem-banner', {
      navigation: {
        nextEl: '.home-button-next',
        prevEl: '.home-button-prev',
      },
    });
  </script>
  <!-- 轮播图 -->
  <script>
    certifySwiper = new Swiper('#certify .swiper-container', {
      watchSlidesProgress: true,
      slidesPerView: 'auto',
      centeredSlides: true,
      loop: true,
      loopedSlides: 5,
      autoplay: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
        progress: function (progress) {
          for (i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            var slideProgress = this.slides[i].progress;
            modify = 1;
            if (Math.abs(slideProgress) > 1) {
              modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            translate = slideProgress * modify * 568 + 'px';
            scale = 1 - Math.abs(slideProgress) / 5;
            zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform('translateX(' + translate + ') scale(' + scale + ')');
            slide.css('zIndex', zIndex);
            slide.css('opacity', 1);
            if (Math.abs(slideProgress) > 3) {
              slide.css('opacity', 0);
            }
          }
        },
        setTransition: function (transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i)
            slide.transition(transition);
          }

        }
      }

    })
  </script>
</body>

</html>